<template>
  <el-dialog
    v-model="state.show"
    title="子设备列表"
    width="1100px"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
  >
    <yt-table
      v-if="state.show"
      :column="columns"
      :data="data"
      :total="state.total"
      :loading="state.loading"
      v-model:page="state.page"
      :view-btn="false"
      :edit-btn="false"
      :selection="false"
      :del-btn="false"
      @on-load="getData"
      menu-slot
    >
      <template #state="scope">
        <el-tag v-if="scope.row.state?.online" type="success" size="small">在线</el-tag>
        <el-tag v-else type="danger" size="small">离线</el-tag>
      </template>
      <template #menuSlot="scope">
        <el-popconfirm title="确认要解除与网关的关联吗？" @confirm="handleDelete(scope.row)">
          <template #reference>
            <el-button link type="danger" icon="Delete">解绑</el-button>
          </template>
        </el-popconfirm>
      </template>
    </yt-table>
  </el-dialog>
</template>
<script lang="ts" setup>
import { IColumn } from '@/components/common/types/tableCommon'
import { getChildrenDeviceList } from '../../api/devices.api'
import { deleteDevices } from '../../api/devices.api'

import { ElPopconfirm } from 'element-plus'
import YtTable from '@/components/common/yt-table'

const state = reactive({
  show: false,
  row: {} as any,
  page: {
    pageSize: 10,
    pageNum: 1,
  },
  total: 0,
  loading: false,
})
const columns = ref<IColumn[]>([
  {
    label: '设备ID',
    key: 'deviceId',
  },
  {
    label: '产品',
    key: 'productName',
    tableWidth: 120,
  },
  {
    label: '设备DN',
    key: 'deviceName',
    tableWidth: 150,
  },
  {
    label: '状态',
    key: 'state',
    slot: true,
    tableWidth: 80,
  },
  {
    label: '创建时间',
    key: 'createAt',
    type: 'date',
    sortable: true,
    tableWidth: 180,
  }
])
const data = ref([
  {
    'id': '16465723451670abc123000030000011a',
    'deviceId': '16465723451670abc123000030000011a',
    'productKey': 'Rf4QSjbm65X45753',
    'productName': '一路开关',
    'deviceName': 'ABC12300003',
    'model': 'S01',
    'secret': null,
    'parentId': '16465226744430aabbccdd22000000143',
    'uid': 'fa1c5eaa-de6e-48b6-805e-8f091c7bb831',
    'subUid': [],
    'state': {
      'online': true,
      'onlineTime': 1681868220001,
      'offlineTime': 1680171375073
    },
    'property': null,
    'tag': {},
    'group': {},
    'createAt': 1646572345167
  },
  {
    'id': '16465723448670abc1230000200000115',
    'deviceId': '16465723448670abc1230000200000115',
    'productKey': 'Rf4QSjbm65X45753',
    'productName': '一路开关',
    'deviceName': 'ABC12300002',
    'model': 'S01',
    'secret': null,
    'parentId': '16465226744430aabbccdd22000000143',
    'uid': 'fa1c5eaa-de6e-48b6-805e-8f091c7bb831',
    'subUid': [],
    'state': {
      'online': true,
      'onlineTime': 1681868220123,
      'offlineTime': 1680171375097
    },
    'property': null,
    'tag': {},
    'group': {},
    'createAt': 1646572344867
  }
])

const handleDelete = async (row: any) => {
  state.loading = true
  await deleteDevices(row.id)
  ElMessage.success('删除成功!')
  state.loading = false
  getData()
}

const getData = () => {
  getChildrenDeviceList({
    ...state.page,
    coverData: state.row.id,
  }).then(res => {
    data.value = res.data
    console.log(res)
  }).finally(() => {
    state.loading = false
  })
}

const openDialog = (row: any) => {
  state.show = true
  state.row = row
  console.log('row', row)
  state.loading = true
  getData()
}

defineExpose({
  openDialog,
})
</script>
